<script setup>
import { addTag, deleteTag, getTagList, updateTag } from '@/apis/content';
import {
    CirclePlusFilled,
    Delete
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue'
import "element-plus/es/components/message-box/style/css";

const tableData = ref([])
const tagList = async () => {
    const res = await getTagList()
    // tableData.value = res.data
    const resDate = res.data.map(item => ({
        ...item,
        shows: item.shows === 1 ? true : false
    }))
    tableData.value = resDate
}
const updateShows = async (row) => {
    const shows = {
        id: row.id,
        shows: row.shows ? 1 : 0,
        tagName: row.tagName
    }
    await updateTag(shows)
}
// 添加标签
const onAdd = () => {
    ElMessageBox.prompt('请输入标签名称', '添加标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[a-zA-Z0-9\u4e00-\u9fa5]+$/,
        inputErrorMessage: '标签名称只能包含字母、数字、中文',
        center: true
    }).then(async ({ value }) => {
        const tagList = {
            tagName: value,
            shows: 0
        }
        await addTag(tagList)
        tagList()
        ElMessageBox.close()
        ElMessage.success('添加成功')
    }).catch(() => {
        ElMessage.error('取消添加')
    })
}
// 删除标签
const onDel = (id) => {
    ElMessageBox.confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning'
    }).then(async () => {
        await deleteTag(id)
        tagList()
        ElMessageBox.close()
        ElMessage.success('删除成功')
    }).catch(() => {
        ElMessage.error('取消删除')
    })
}

onMounted(() => {
    tagList()
})
</script>

<template>
    <div class="header">
        <h2>标签管理</h2>
        <el-button type="primary" :icon="CirclePlusFilled" @click="onAdd">添加</el-button>
    </div>
    <div class="table">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="150" align="center" />
            <el-table-column prop="tagName" label="名称" width="150" align="center" />
            <el-table-column prop="createTime" label="创建时间" width="240" align="center" />
            <el-table-column prop="updateTime" label="修改时间" width="240" align="center" />
            <el-table-column prop="shows" label="操作">
                <template #default="scope">
                    <el-switch v-model="scope.row.shows" @change="updateShows(scope.row)" inline-prompt
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="展示"
                        inactive-text="隐藏" />
                    <el-button type="danger" :icon="Delete" circle plain style="margin-left: 10px;"
                        @click="onDel(scope.row.id)" />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<style lang="scss" scoped>
.header {
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
</style>